<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div#signin {
			width: 500px;
			height: 300px;
			color: rgba(0, 0, 0, 0.5);
		}

		div#signin form {
			padding: 5px;
		}

		p {
			width: 200px;
			height: 1.5em;
			line-height: 1.5em;
			padding-left: 10px;
			border: 0.5px solid rgba(0, 0, 0, 0.5);
			display: inline-block;
		}

		span {
			font-size: 14px;
		}

		div#signin form div {
			height: 40px;
		}

		img {
			vertical-align: middle;
		}

		input {
			border-style: hidden;
		}

		div#verify > img:last-of-type {
			display: inline-block;
			border: 1px solid rgba(0, 0, 0, 0.5);
			margin-top: -3px;
		}

		div#verify p {
			width: 150px;
		}

		div#verify p input {
			width: 120px;
		}

		div#check {
			margin-top: 20px;
			margin-left: 40px;
		}

		div#sign input {
			margin-left: 30px;
			width: 12em;
			height: 2em;
			background-color: #55ABE8;
			border-radius: 5px;
		}

		.error {
			background: url(reg-error.png) no-repeat left center;
			padding-left: 23px;
			color: red;
		}


	</style>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
        $(function () {
            function email() {
                var email = $.trim($("#email input").val());
                var isEmail = /^[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&\'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/gi;
                if (email == "") {
                    $("#email input").parent().next().html("邮箱不能为空").addClass("error");
                } else if (!(isEmail.test(email))) {
                    $("#email input").parent().next().html("邮箱格式不正确").addClass("error");
                } else {
                    $("#email input").parent().next().html("").removeClass("error");
                    return true;
                }
                return false;
            };
            function user(){
                var user = $.trim($("#user input").val());
                var isUser = /^[A-Za-z0-9\u4E00-\u9FA5\uf900-\ufa2d]+$/gi;
                if (user == "") {
                    $("#user input").parent().next().html("昵称不能为空").addClass("error");
                } else if (!(isUser.test(user)) || user.length < 4 || user.length > 12) {
                    $("#user input").parent().next().html("输入4-12位字符、英文、数字或者中文").addClass("error");
                    ;
                } else {
                    $("#user input").parent().next().html("").removeClass("error");
                    return true;
                }
                return false;
            };
            function pass1(){
                var val1 = $.trim($("#pass1 input").val());
                var p = /^[\w]{6,16}$/gi;
                if (val1 == "") {
                    $("#pass1 input").parent().next().html("密码不能为空").addClass("error");
                } else if (!p.test(val1)) {
                    $("#pass1 input").parent().next().html("输入6-16位字符或数字、字母,区分大小写").addClass("error");
                } else {
                    $("#pass1 input").parent().next().html("").removeClass("error");
                    return true;
                }
                return false;
            };
            function pass2(){
                var val2 = $.trim($("#pass2 input").val());
                if (val2 == "") {
                    $("#pass2 input").parent().next().html("确密码不能为空").addClass("error");
                } else if (val2 !== $.trim($("#pass1 input").val())) {
                    $("#pass2 input").parent().next().html("两次密码输入不一致，请重新填写").addClass("error");
                } else {
                    $("#pass2 input").parent().next().html("").removeClass("error");
                    return true;
                }
                return false;
            };
            function verify(){
                var val = $.trim($("#verify input").val());
                if (val == "") {
                    $("#verify input").parent().next().next().html("验证码不能为空").addClass("error");
                } else {
                    $("#verify input").parent().next().next().html("").removeClass("error");
                    return true;
                }
                return false;
            };
            function check(){
                var val = $("#check input").is(":checked");
                if (!val)
                    $("#check input").next().next().html("请同意服务条款").addClass("error");
                else
                    $("#check input").next().next().html("").removeClass("error");
            };
            $("#email input").blur(function () {
                email();
            });
            $("#user input").blur(function () {
                user();
            });
            $("#pass1 input").blur(function () {
                pass1();
            });
            $("#pass2 input").blur(function () {
                pass2();
            });

            $("#verify input").blur(function () {
                verify();
            });
            $("#check input").click(function () {
                check();
            });
            $("#sign input").click(function () {
	            if(email()&&user()&&pass1()&&pass2()&&verify()&&$("#check input").is(":checked"))
	                return true;
	            return false;
            });
        });
	</script>
</head>
<body>
<div id="signin">
	<form action="../1111/jd.html" method="post">
		<div id="email">
			<p><img src="login-input5.png"/><input name="email" placeholder="请输入您的常用邮箱" type="email"/></p>
			<span>请输入您的常用邮箱</span>
		</div>
		<div id="user">
			<p><img src="login-input1.png"/><input name="user" placeholder="请输入昵称" type="text"/></p>
			<span>请输入昵称</span>
		</div>
		<div id="pass1">
			<p><img src="login-input2.png"/><input name="password1" placeholder="请输入密码" type="password"/></p>
			<span>6-16位字符英文数字或者中文均可</span>
		</div>
		<div id="pass2">
			<p><img src="login-input2.png"/><input name="password2" placeholder="请再次输入密码" type="password"/></p>
			<span></span>
		</div>
		<div id="verify">
			<p><img src="login-input3.png"/><input placeholder="请输入右侧验证码" type="text"/></p>
			<img height="23px" src="yanzhengma.png"/>
			<span></span>
		</div>
		<div id="check">
			<input type="checkbox" value=""/>同意
			<a href="#">用户服务条款</a>
			<span></span>
		</div>
		<div id="sign">
			<input type="submit" value="注册"/>
		</div>
	</form>
</div>
</body>
</html>
